{% extends "blog/base.html" %}

{% block blog_content %}
<h3>Create New Blog Post</h3>

<div class="row">
    <div class="col-md-8">
        <form method="POST">
            <div class="mb-3">
                <label for="title" class="form-label">Title</label>
                <input type="text" class="form-control" id="title" name="title" 
                       value="{{ request.form.get('title', '') }}" required>
            </div>
            
            <div class="mb-3">
                <label for="category" class="form-label">Category</label>
                <select class="form-select" id="category" name="category" required>
                    <option value="">Select a category</option>
                    <option value="technology" {% if request.form.get('category') == 'technology' %}selected{% endif %}>Technology</option>
                    <option value="lifestyle" {% if request.form.get('category') == 'lifestyle' %}selected{% endif %}>Lifestyle</option>
                    <option value="travel" {% if request.form.get('category') == 'travel' %}selected{% endif %}>Travel</option>
                    <option value="food" {% if request.form.get('category') == 'food' %}selected{% endif %}>Food</option>
                    <option value="education" {% if request.form.get('category') == 'education' %}selected{% endif %}>Education</option>
                </select>
            </div>
            
            <div class="mb-3">
                <label for="content" class="form-label">Content</label>
                <textarea class="form-control" id="content" name="content" rows="10" required>{{ request.form.get('content', '') }}</textarea>
            </div>
            
            <button type="submit" class="btn btn-primary">Publish Post</button>
            <a href="{{ url_for('blog.index') }}" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5>Writing Guidelines</h5>
            </div>
            <div class="card-body">
                <p>When creating a blog post, consider:</p>
                <ul>
                    <li>Clear, engaging title</li>
                    <li>Proper categorization</li>
                    <li>Well-structured content</li>
                    <li>Appropriate length (300-1000 words)</li>
                    <li>Correct spelling and grammar</li>
                </ul>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5>Markdown Support</h5>
            </div>
            <div class="card-body">
                <p>This blog supports Markdown formatting:</p>
                <ul>
                    <li>**Bold text**</li>
                    <li>*Italic text*</li>
                    <li># Heading</li>
                    <li>[Link](url)</li>
                    <li>- List item</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}